<!--
 * @Description: 登录页面
 * @Author: Gaq
 * @Date: 2022-10-13 23:24:55
 * @LastEditTime: 2022-11-22 22:50:14
 * @LastEditors: Gaq
-->
<template>
  <div
    style="
      width: 580px;
      height: 350px;
      margin: 150px auto;
      padding: 15px;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      position: relative;
    "
  >
    <div class="card">
      <img src="@/static/image/logo.png" alt="" />
    </div>

    <!-- <el-radio-group v-model="user.role" @change="change" -->
    <div style="margin-top: 85px; margin-right: 50px">
      <el-radio-group
        v-model="user.role"
        style="display: flex; justify-content: center; margin-bottom: 10px"
      >
        <el-radio label="common">普通用户</el-radio>
        <el-radio label="inheritor">传承人</el-radio>
        <el-radio label="manufacturer">制造商</el-radio>S
      </el-radio-group>

      <el-form :model="user" label-width="80px">
        <el-form-item label="用户账号">
          <el-input v-model="user.account" />
        </el-form-item>

        <el-form-item label="用户密码">
          <el-input v-model="user.password" show-password />
        </el-form-item>
      </el-form>
      <div style="display: flex; justify-content: center; margin-top: 40px">
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
          <el-button style="margin-left: 55px" @click="cancle">取消</el-button>
        </el-form-item>
      </div>
      <div class="msg" @click="toRegistration">
        <p>暂无账号，去注册</p>
      </div>
    </div>
  </div>
</template>


<script setup>
import request from "@/utils/request";
import router from "@/router";
import { ElMessage } from "element-plus";

const user = reactive({
  account: "",
  password: "",
  role: "common",
});

const onSubmit = () => {
  request.post("/user/login", user).then((res) => {
    res.code == 0
      ? (localStorage.setItem("token", res.data.token),
        localStorage.setItem("user", JSON.stringify(res.data.user)),
        localStorage.setItem("role", res.data.user.role),
        router.push({
          path: "/home",
        }))
      : ElMessage.error(res.msg);
  });
};

const cancle = () => {
  user.account = "";
  user.password = "";
};

const toRegistration = () => {
  router.push({
    path: "/registration",
  });
};
</script>

<style lang="less" scoped>
.card {
  img {
    margin-top: 30px;
    width: 250px;
    height: 250px;
    float: left;
  }
}
.msg {
  font-size: x-small;
  position: absolute;
  right: 50px;
  bottom: 10px;
  :hover {
    text-decoration: underline;
    cursor: pointer;
    color: rgb(123, 190, 238);
  }
}
</style>